<template>
  <div class="box">
    <el-card>
      <el-form inline>
        <el-form-item label="一级分类">
          <el-select
            placeholder="请选择分类"
            v-model="c1Arr.id"
            @change="getC2(c1Arr.id)"
          >
            <el-option
              v-for="(item, index) in c1Arr"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类" class="form">
          <el-select
            @change="getC3(c2Arr.id)"
            placeholder="请选择分类"
            v-model="c2Arr.id"
          >
            <el-option
              v-for="(item, index) in c2Arr"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="三级分类">
          <el-select placeholder="请选择分类" v-model="c3Arr.id">
            <el-option
              v-for="(item, index) in c3Arr"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { reqGetC1, reqGetC2, reqGetC3 } from "@/api/pingtaitype";
export default {
  name: "index",
  components: {},
  data() {
    return {
      c1Arr: [],
      c2Arr: [],
      c3Arr: [],
    };
  },
  methods: {
    async getC1List() {
      try {
        const result = await reqGetC1();
        this.c1Arr = result.data;
        console.log(result);
      } catch (error) {}
    },
    async getC2(c1Id) {
      this.c2Arr.id = "";
      this.c3Arr.id = "";
      const result = await reqGetC2(c1Id);
      this.c2Arr = result.data;
    },
    async getC3(c2Id) {
      const result = await reqGetC3(c2Id);
      this.c3Arr = result.data;
    },
  },
  mounted() {
    this.getC1List();
  },
};
</script>

<style scoped lang="scss">
.box {
  padding: 10px;
  .form {
    margin: 0 20px;
  }
}
</style>
